<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="css/common.css">
</head>
<body>
    <!-- 状态栏 -->
    <div class="status-bar"></div>

    <!-- 导航栏 -->
    <div class="weapp-nav">
        <span>个人中心</span>
    </div>

    <!-- 主要内容区 -->
    <div class="weapp-container">
        <!-- 用户信息卡片 -->
        <div class="weapp-card">
            <div class="flex items-center">
                <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix" alt="用户头像" 
                     class="w-16 h-16 rounded-full border-2 border-primary">
                <div class="ml-4 flex-1">
                    <h2 class="text-lg font-semibold">健康达人</h2>
                    <p class="text-sm text-gray-500">ID: 888888</p>
                </div>
                <button class="weapp-button">
                    编辑资料
                </button>
            </div>
            <div class="grid grid-cols-3 gap-4 mt-6 text-center">
                <div>
                    <div class="text-xl font-bold text-primary">28</div>
                    <div class="text-sm text-gray-500">连续打卡</div>
                </div>
                <div>
                    <div class="text-xl font-bold text-green-500">85</div>
                    <div class="text-sm text-gray-500">健康分</div>
                </div>
                <div>
                    <div class="text-xl font-bold text-blue-500">180</div>
                    <div class="text-sm text-gray-500">总记录</div>
                </div>
            </div>
        </div>

        <!-- 功能列表 -->
        <div class="weapp-card">
            <div class="weapp-list">
                <div class="weapp-list-item">
                    <i class="fas fa-bell text-yellow-500 mr-3"></i>
                    <div class="flex-1">提醒设置</div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                <div class="weapp-list-item">
                    <i class="fas fa-chart-line text-blue-500 mr-3"></i>
                    <div class="flex-1">健康目标</div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                <div class="weapp-list-item">
                    <i class="fas fa-share-alt text-green-500 mr-3"></i>
                    <div class="flex-1">分享给医生</div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
            </div>
        </div>

        <!-- 系统设置 -->
        <div class="weapp-card">
            <div class="weapp-list">
                <div class="weapp-list-item">
                    <i class="fas fa-shield-alt text-purple-500 mr-3"></i>
                    <div class="flex-1">隐私设置</div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                <div class="weapp-list-item">
                    <i class="fas fa-moon text-indigo-500 mr-3"></i>
                    <div class="flex-1">深色模式</div>
                    <div class="relative inline-block w-10 mr-2 align-middle select-none">
                        <input type="checkbox" name="toggle" id="darkMode" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
                        <label for="darkMode" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                    </div>
                </div>
                <div class="weapp-list-item">
                    <i class="fas fa-language text-blue-500 mr-3"></i>
                    <div class="flex-1">语言</div>
                    <div class="text-gray-500">简体中文</div>
                    <i class="fas fa-chevron-right text-gray-400 ml-2"></i>
                </div>
            </div>
        </div>

        <!-- 其他选项 -->
        <div class="weapp-card">
            <div class="weapp-list">
                <div class="weapp-list-item">
                    <i class="fas fa-info-circle text-blue-500 mr-3"></i>
                    <div class="flex-1">关于我们</div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                <div class="weapp-list-item">
                    <i class="fas fa-question-circle text-yellow-500 mr-3"></i>
                    <div class="flex-1">帮助与反馈</div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
            </div>
        </div>

        <!-- 退出登录按钮 -->
        <div class="mt-6 mb-8">
            <button class="w-full weapp-button bg-red-500">
                退出登录
            </button>
        </div>
    </div>

    <!-- 底部标签栏 -->
    <div class="weapp-tabbar">
        <div class="weapp-tabbar-item">
            <i class="fas fa-home weapp-tabbar-icon"></i>
            <span>记录</span>
        </div>
        <div class="weapp-tabbar-item">
            <i class="fas fa-calendar-alt weapp-tabbar-icon"></i>
            <span>历史</span>
        </div>
        <div class="weapp-tabbar-item">
            <i class="fas fa-chart-bar weapp-tabbar-icon"></i>
            <span>统计</span>
        </div>
        <div class="weapp-tabbar-item active">
            <i class="fas fa-user weapp-tabbar-icon"></i>
            <span>我的</span>
        </div>
    </div>

    <style>
        /* 开关按钮样式 */
        .toggle-checkbox:checked {
            right: 0;
            border-color: var(--weapp-primary);
        }
        .toggle-checkbox:checked + .toggle-label {
            background-color: var(--weapp-primary);
        }
        .toggle-checkbox {
            right: 0;
            transition: all 0.3s;
        }
        .toggle-label {
            transition: background-color 0.3s;
        }
    </style>
</body>
</html> 